<div class="doc-content">
  <div>
    {$ doc.content | marked $}
  </div>
  <div flex layout="column">

    <section ng-repeat="demo in currentComponent.demos" 
      class="demo-container {{currentComponent.componentId}}-{{demo.id}}"
      ng-class="{'show-source': demo.$showSource}">

      <md-toolbar class="demo-toolbar"> 
        <div class="md-toolbar-tools">
          <span>{{demo.name}}</span>
          <span flex></span>
          <md-button
            style="min-width: 72px;"
            ng-click="demo.$showSource = !demo.$showSource">
            Source
          </md-button>
        </div>
      </md-toolbar>

      <md-tabs style="border-top: solid 1px #00ADC3;"
        class="demo-source-tabs">
        <md-tab ng-repeat="file in demo.$files"
                      active="file === demo.$selectedFile"
                      ng-click="demo.$selectedFile = file"
                      label="{{file.basePath}}">
            <md-content md-scroll-y class="demo-source-container">
                    <hljs code="file.content"
                          lang="{{file.fileType}}" >
                    </hljs>
            </md-content>
        </md-tab>
      </md-tabs>


      <div demo-include="demo" class="md-whiteframe-z1">
      </div>
    </section>

  </div>
</div>
